<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>APL报表查询</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta content="no-cache, no-store, must-revalidate" http-equiv="Cache-Control"/>
    <meta content="no-cache" http-equiv="Pragma"/>
    <meta content="0" http-equiv="Expires"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <link rel="stylesheet" href="../../styles/base.css"/>
    <link rel="stylesheet" href="../../styles/common.css"/>
    <link rel="stylesheet" href="../../styles/font/iconfont.css"/>
    <link rel="stylesheet" href="../../styles/pages/tabs.css"/>
    <link rel="stylesheet" href="../../jqueryNicepage/css/layui.css"  media="all">
    <link rel="stylesheet" href="../../styles/pages/calendar.css">
    <link rel="stylesheet" href="../../styles/jquery.multiselect.css"/>
	<link rel="stylesheet" href="../../styles/chosen.css"/>
    <style>
		.datagrid .panel-body {
			overflow: hidden;
			position: relative;
		}
        .queryCondition #dd{
            left:50px;
            top:0px;
        }
        .queryCondition{
            width:100%;
            min-height:180px;
            line-height: 30px;
            margin-top: 10px;
            padding-bottom: 10px;
            height:auto;
            border-bottom:2px solid #ccc;
        }
        .queryCondition span{
            display: inline-block;
             margin-top: ;
        }
        .boxContainer {
            background: #fff;
            border:none;
            box-sizing: border-box;
            width: 100%;
            top: 5px;
            border-bottom: 0;
            left: 10px;
            height: 98%;
            /*position:relative;*/
			position:fixed
        }
        
        .ctrBtn{
			text-align: right;
			margin-top: 20px;
			margin-right:10px;
		}
        .ctrBtn button {
			display: inline-block;
			margin: 0 5px 5px 5px;
			line-height: 30px;
			padding: 0 10px;
			cursor: pointer;
		}
		.folder:hover, .clearBtn:hover, .searchSureBtn:hover, .toExcell:hover{
            color:#fff;
            background:#40E0D0;
        }
		
		a {
			color:blue
		}
        
        /**
        	newText:文本框的样式
        	newSelect:选择框的样式
        */
        .newText, .newSelect {
        	color:#666;
            height: 38px;
            width: 150px;
            padding: 0 6px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            font-size: 14px;
            outline: none;
            line-height: 38px;
        }
        
         /**分类属性文本框的样式，不同的样式名称，是为了通过不同的样式封装成查询条件*/
        .classText {
       		color:#666;
            height: 38px;
            width: 150px;
            padding: 0 6px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            font-size: 14px;
            outline: none;
            line-height: 38px;
        }
        
        .pro_kvs2{float: right;width: 100%; color:#666}
		.pro_kvs2 .pro_kv{float: left;width: 25%;height: 37px;line-height: 27px;margin-bottom: 5px;padding: 5px; box-sizing:border-box;}
		.pro_kvs2 .pro_kvhalf{float: left;width: 50%;height: 37px;line-height: 27px;margin-bottom: 5px;padding: 5px; box-sizing:border-box;}
		.pro_kvs2 .pro_k{text-align: right;float: left;width: 25%;height: 100%;line-height: 27px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;word-wrap: normal;}
        .pro_v{text-align: left;float: left;width: 70%;height: 100%;line-height: 27px;}
        .pro_d{text-align: left;float: left;width: 5%;height: 100%;line-height: 27px;}
    </style>

</head>
<body>
<div class="boxContainer" id='aplReportInfo'>
    <div id="loading">
        <img src='../../styles/img/loading.gif' />
    </div>
    <div class="bgClassBox">
		<div class="queryCondition">
			<div>
				<div class="queryParams" /*style="overflow: hidden;"*/ >
					<div class="pro_kvs2">
				
					<div class="pro_kv">
						<div class="pro_k" id="lab1" title="开始时间">
							<span class="required2"></span>开始时间
						</div>
						<div class="pro_d">：</div>
						<div class="pro_v">
							<input class="newText" type="text" onclick="laydate();" id="dt" placeholder="请输入开始日期"></input>
						</div>
					</div>
					
					<div class="pro_kv">
						<div class="pro_k" id="lab2" title="结束时间">
							<span class="required2"></span>结束时间
						</div>
						<div class="pro_d">：</div>
						<div class="pro_v">
							<input class="newText" type="text" onclick="laydate();" id="dt1" placeholder="请输入结束日期"></input>
						</div>
						
						<div id="dd"></div>
						<div id="tt"></div>
					</div>
				
				
					<div class="pro_kv">
						<div class="pro_k" id="lab3" title="名称">
							<span class="required2"></span>名称
						</div>
						<div class="pro_d">：</div>
						<div class="pro_v">
							<input class="newText" type="text"  id="name" placeholder="请输入名称"></input>
						</div>
					</div>
					
					<div class="pro_kv">
						<div class="pro_k" id="lab4" title="编码">
							<span class="required2"></span>编码
						</div>
						<div class="pro_d">：</div>
						<div class="pro_v">
							<input class="newText" type="text"  id="number" placeholder="请输入编码"></input>
						</div>
					</div>
					
					<div class="pro_kv">
						<div class="pro_k" id="lab5" title="品牌商">
							<span class="required2"></span>品牌商
						</div>
						<div class="pro_d">：</div>
						<div class="pro_v">
							<input class="newText" type="text"  id="aplBrand" placeholder="请输入品牌商名称"></input>
						</div>
					</div>
					
					<div class="pro_kv">
						<div class="pro_k" id="lab6" title="是否为临时材料">
							<span class="required2"></span>是否为临时材料
						</div>
						<div class="pro_d">：</div>
						<div class="pro_v">
							<!-- <input class="newText" type="text"  id="IsTemporaryMaterial" placeholder="请输入是否为临时材料"></input> -->
							<select class="newText" id='IsTemporaryMaterial' >
								 <option value="">请选择是否为临时材料</option>
							</select>
						</div>
					</div>

						<div class="pro_kv">
							<div class="pro_k" id="lab8" title="环保等级">
								<span class="required2"></span>环保等级
							</div>
							<div class="pro_d">：</div>
							<div class="pro_v">
								<!-- <input class="newText" type="text"  id="environmentalLevel" placeholder="请输入环保等级"></input> -->
								<select class="newSelect" id='environmentalLevel' >
									<option value="">请选择环保等级</option>
								</select>
							</div>
						</div>

						<!-- 	材料状态
                            <div class="pro_kv">
                                <div class="pro_k" id="lab9" title="材料状态">
                                    <span class="required2"></span>材料状态
                                </div>
                                <div class="pro_d">：</div>
                                <div class="pro_v">
                                    <select class="newSelect" id='materialState' >
                                         <option value="">请选择材料状态</option>
                                    </select>
                                </div>
                            </div>   -->

						<div class="pro_kv">
							<div class="pro_k" id="lab10" title="材料型号">
								<span class="required2"></span>材料型号
							</div>
							<div class="pro_d">：</div>
							<div class="pro_v">
								<input class="newText" type="text"  id="MaterialType" placeholder="请输入材料型号"></input>
							</div>
						</div>

					<div class="pro_kvhalf">
						<div class="pro_k" id="lab71" title="消费品/LTPS-手机产品+中尺寸产品">
							<span class="required2"></span>消费品/LTPS-手机产品+中尺寸产品
						</div>
						<div class="pro_d">：</div>
						<div class="pro_v">
							<!-- <input class="newText" type="text"  id="UsableRange" placeholder="请输入使用范围"></input> -->
							<select class="newSelect" id='UsableRange1' multiple>
							</select>
						</div>
					</div>
						<div class="pro_kvhalf">
							<div class="pro_k" id="lab7" title="消费品/a-si-手机产品">
								<span class="required2"></span>消费品/a-si-手机产品
							</div>
							<div class="pro_d">：</div>
							<div class="pro_v">
								<!-- <input class="newText" type="text"  id="UsableRange" placeholder="请输入使用范围"></input> -->
								<select class="newSelect" id='UsableRange2' multiple>
								</select>
							</div>
						</div>

						<div class="pro_kvhalf">
							<div class="pro_k" id="lab7" title="消费品/OLED-手机产品">
								<span class="required2"></span>消费品/OLED-手机产品
							</div>
							<div class="pro_d">：</div>
							<div class="pro_v">
								<!-- <input class="newText" type="text"  id="UsableRange" placeholder="请输入使用范围"></input> -->
								<select class="newSelect" id='UsableRange3' multiple>
								</select>
							</div>
						</div>

						<div class="pro_kvhalf">
							<div class="pro_k" id="lab7" title="消费品/OLED-穿戴产品">
								<span class="required2"></span>消费品/OLED-穿戴产品
							</div>
							<div class="pro_d">：</div>
							<div class="pro_v">
								<!-- <input class="newText" type="text"  id="UsableRange" placeholder="请输入使用范围"></input> -->
								<select class="newSelect" id='UsableRange4' multiple>
								</select>
							</div>
						</div>

						<div class="pro_kvhalf">
							<div class="pro_k" id="lab7" title="车载品-车载产品">
								<span class="required2"></span>车载品-车载产品
							</div>
							<div class="pro_d">：</div>
							<div class="pro_v">
								<!-- <input class="newText" type="text"  id="UsableRange" placeholder="请输入使用范围"></input> -->
								<select class="newSelect" id='UsableRange5' multiple>
								</select>
							</div>
						</div>

						<div class="pro_kvhalf">
							<div class="pro_k" id="lab7" title="车载品-Auto2020产品">
								<span class="required2"></span>车载品-Auto2020产品
							</div>
							<div class="pro_d">：</div>
							<div class="pro_v">
								<!-- <input class="newText" type="text"  id="UsableRange" placeholder="请输入使用范围"></input> -->
								<select class="newSelect" id='UsableRange6' multiple>
								</select>
							</div>
						</div>

						<div class="pro_kvhalf">
							<div class="pro_k" id="lab7" title="工业品-工业I产品">
								<span class="required2"></span>工业品-工业I产品
							</div>
							<div class="pro_d">：</div>
							<div class="pro_v">
								<!-- <input class="newText" type="text"  id="UsableRange" placeholder="请输入使用范围"></input> -->
								<select class="newSelect" id='UsableRange7' multiple>
								</select>
							</div>
						</div>

						<div class="pro_kvhalf">
							<div class="pro_k" id="lab7" title="工业品-工业II/工业III产品">
								<span class="required2"></span>工业品-工业II/工业III产品
							</div>
							<div class="pro_d">：</div>
							<div class="pro_v">
								<!-- <input class="newText" type="text"  id="UsableRange" placeholder="请输入使用范围"></input> -->
								<select class="newSelect" id='UsableRange8' multiple>
								</select>
							</div>
						</div>


					
					<div class="pro_kv">
						<div class="pro_k" id="lab11" title="release产地">
							<span class="required2"></span>release产地
						</div>
						<div class="pro_d">：</div>
						<div class="pro_v">
							<!-- <input class="newText" type="text"  id="releaseSite" placeholder="请输入release产地"></input> -->
							<select class="newSelect" id='releaseSite' >
								 <option value="">请选择release产地</option>
							</select>
						</div>
					</div>
					
					<div class="pro_kv">
						<div class="pro_k" id="lab12" title="二级物料">
							<span class="required2"></span>二级物料
						</div>
						<div class="pro_d">：</div>
						<div class="pro_v">
							<select class="newText" id='select1' >
								 <option value="">请选择二级物料</option>
							</select>
						</div>
					</div>
				
				<!--分类属性搜索条件-->
				<div class="pro_kvs2" >
					<div id="tb"></div>
				</div>
				</div>
				
				<div class="pro_kvs2" >
					<div class="ctrBtn">
						<button class="searchSureBtn">搜索</button>
						<button class="clearBtn">重置</button>
						<button class="folder">折叠/展开</button>
						<button class="toExcell">导出Excel</button>
					</div>
				</div>

				<div style="clear: both"></div>
				<table id="showTable"></table>
				
				<table id="demo" lay-filter="test"></table>
			</div>
		</div>
    </div>
</div>
<script type="text/javascript" src="../../js/jquery-1.11.3.min.js"></script>
<script src="../../js/json2.js"></script>
<script src="../../js/common/publicClass.js"></script>
<script src="../../layer/layer.js" charset="utf-8"></script>
<script type="text/javascript" src="../../js/constants/calendar.js"></script>
<script type="text/javascript" src="../../js/common/utils.js"></script>
<script type="text/javascript" src="../../js/common/myAjax.js"></script>
<script language="Javascript" src="../../jqueryNicepage/js/layui.js"></script>
<script type="text/javascript" src="../../js/common/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../js/common/jquery.multiselect.js"></script>
<script type="text/javascript" src="../../js/pages/dccQuery/selects.js"></script>
<script type="text/javascript" src="../../js/chosen.jquery.min.js"></script>
<script type="text/javascript" src="/Windchill/netmarkets/jsp/ext/BOMECO/tianma/materialPages/APL/APLReportQuery.js"></script>

<script type="text/javascript" src="../../laydate/laydate.js"></script>

<script>
	
	 //window.onload=function(){
	 $(window).load(function(){
		
		//折叠操作
        $('.folder').click(function(){
			// var select1 = $('#select1').val();
			// if(""!=select1) {
			// 	$('#tb').toggle();
			// }
			var divQuery=$(".pro_kvs2")[0];
			$(divQuery).toggle();
			layui.table.reload('demo',{height:$(window).height()-divQuery.offsetHeight-85});
		});
        var typeName = "cn.tianma.AVLMaterial";//APL材料
        
        //一级物料
        MaterialReverseAjax2("/APLController/queryClassificationNodeById","二级物料",function(str){
            if(str.data!=undefined&&str.data.length>0){
            	renderForm1(str.data,"select1");
				$('#select1').chosen();
            }
        });
        
        //是否为临时材料
        showEnumerateSelect("是否","IsTemporaryMaterial");


		 //使用范围
		 showEnumerateSelectWithChosen("Level","UsableRange1");
		 showEnumerateSelectWithChosen("Level","UsableRange2");
		 showEnumerateSelectWithChosen("Level","UsableRange3");
		 showEnumerateSelectWithChosen("Level","UsableRange4");
		 showEnumerateSelectWithChosen("Level","UsableRange5");
		 showEnumerateSelectWithChosen("Level","UsableRange6");
		 showEnumerateSelectWithChosen("Level","UsableRange7");
		 showEnumerateSelectWithChosen("Level","UsableRange8");

        
        //使用范围
        //showSelect(typeName,"UsableRange","UsableRange");
        showUsableRange("/QuantityController/findQuantity", "UsableRange");
        
       	//环保等级 environmentalLevel
       	showSelect(typeName,"environmentalLevel","environmentalLevel");
        
        //材料状态 materialState
       //	showSelect(typeName,"materialState","materialState");
        
        //release产地		releaseSite
        showSelect(typeName,"releaseSite","releaseSite");
		
		//点击一级物料后，加载对应分类属性
		$("#select1").on('change',function(evt, params) {
			var selectSelectVal = $('#select1').val();
			var tb = $("#tb");
			tb.empty();//先清空
			if("" != selectSelectVal) {
				MaterialReverseAjax2("/APLController/queryClassAttrs",selectSelectVal,function(str){
					if(str.data!=undefined&&str.data.length>0){
						for(var i = 0 ; i < str.data.length; i++) {
							var key = str.data[i].key;
							var value = str.data[i].value;
							var dataType = str.data[i].dataType;
							
							var inputText = "<input class='classText' type='text' id='"+key+"' placeholder='请输入"+value+"'></input>";
							if("wt.iba.definition.TimestampDefinition" == dataType) {
								inputText = "<input class='classText' onclick='laydate();' type='text' id='"+key+"' placeholder='请输入"+value+"'></input>";
							}
							
							var inputtest ="<div class='pro_kv'>"
								+ "<div class='pro_k' title="+value+">"
								+ "<span class='required2'></span>"+value
								+ "</div>"
								+ "<div class='pro_d'>：</div>"
								+ "<div class='pro_v'>"
								+ inputText
								+ "</div>"
								+ "</div>";
							tb.append(inputtest);
						}
					} else {
						//$.messager.alert('提示','当前分类未配置权限，仅显示通用属性，若需查看分类详细属性，请联系系统管理员');
						layer.alert(
							'当前分类未配置权限，仅显示通用属性，若需查看分类详细属性，请联系系统管理员', 
							{icon: 3} // 1\2\3
						);
					}
				});
			} else {
				tb.empty();
			}
		});
        
        
        //导出
        $(".toExcell").click(function(){
            var data = setSearchCondition();
			var loadIndex=layer.load(1);
            MaterialReverseAjax2("/APLController/export",JSON.stringify(data),function(str){
				layer.close(loadIndex);
                if(str.path!=undefined&&str.path!=""){
                    window.location.href=str.path;
                } else {
					//$.messager.alert('提示','暂未查询到数据，无法导出');
					layer.alert(
						'暂未查询到数据，无法导出', 
						{icon: 2} // 1\2\3
					);
				}
            })
        });
        
        //重置
        $(".clearBtn").click(function(){
        	$(":input").val("");//清除所有文本框的值
        	$("#tb").empty();//将选择的分类也清除
			//清空多选框数据
			for(var i=1;i<=8;i++){
				var select=$('#UsableRange'+i);
				select.val("");
				select.chosen().trigger("chosen:updated");
			}
			var select=$('#select1');
			select.val("");
			select.chosen().trigger("chosen:updated");
        });
		
		//搜索
		$('.searchSureBtn').click(function(){
			var divQuery=$(".pro_kvs2")[0];
			$(divQuery).toggle(false);
			getGridPanel();
		});
		
	});

	 $(window).resize(function (){
		 for(var i=1;i<=8;i++) {
			 var select = $('#UsableRange' + i);
			 //重置
			 select.chosen('destroy');
			 //设置宽度95%
			 select.css("width","98%");
			 select.chosen({
				 "placeholder_text_multiple":"请选择使用范围",
				 "max_selected_options":5
				 // "display_selected_options":false
				 //"hide_results_on_select":false
			 });
			 //禁止下拉框自动往下增加
			 var div=select.next();
			 var ul=div.find("ul");
			 div.css("height","100%");
			 ul.css("height","100%");
		 }
	 });
	
//查询构造表格参数
function getGridPanel() {
	var data = setSearchCondition();
	
	var name = $('#name').val();
	var select1 = $('#select1').val();
	if(""!= name && ""!= select1) {
		alert("【名称】和【二级物料】只能选择一个");
	} else {
		var loadIndex=layer.load(1);
		MaterialReverseAjax2("/APLController/queryAPLLayUI",JSON.stringify(data),function(str){
	        if(str.data!=undefined&&str.data.length>0){
				var columns = str.columns;
				var data=eval(str.data);
				var code=str.code;
				var msg=str.msg;
	        	fetchData(columns,data,code,msg);
	        }
			layer.close(loadIndex);
	    });
	}
}

function fetchData(columns,resultdata,code,msg) {
	var divQuery=$(".pro_kvs2")[0];
	layui.use('table', function(){
		var table = layui.table;
		var data = setSearchCondition();
		var tablleIns=table.render({
				elem: '#demo',
				height: $(window).height()-divQuery.offsetHeight-85,
				width:  $(window).width()-10,
				page:true,
				data: resultdata,
				limit: resultdata.length,
				text: {
					none: msg
				},
				cols: [columns]
			});
	});
}
	
</script>
</body>
</html>